<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <div class="header-container">
            <div class="logo">
                <i class="fa fa-book"></i>
                <span>图书馆座位预约系统</span>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="active"><a href="index.html"><i class="fa fa-tachometer"></i> 首页</a></li>
                    <li><a href="seat-selection.html"><i class="fa fa-th-large"></i> 座位选择</a></li>
                    <li><a href="booking-management.html"><i class="fa fa-calendar"></i> 预约管理</a></li>
                    <li><a href="user-profile.html"><i class="fa fa-user"></i> 个人中心</a></li>
                </ul>
            </nav>
            <div class="user-info">
                <span class="welcome">欢迎，用户</span>
                <div class="avatar">
                    <i class="fa fa-user-circle"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="container">
            <!-- 欢迎信息 -->
            <section class="welcome-section">
                <h1>欢迎使用图书馆座位预约系统</h1>
                <p>高效管理您的学习时间，轻松预约理想座位</p>
            </section>

            <!-- 数据统计卡片 -->
            <section class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon bg-blue">
                        <i class="fa fa-check-circle"></i>
                    </div>
                    <div class="stat-content">
                        <h3>今日预约</h3>
                        <p class="stat-number">2</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon bg-green">
                        <i class="fa fa-calendar-check-o"></i>
                    </div>
                    <div class="stat-content">
                        <h3>本周预约</h3>
                        <p class="stat-number">5</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon bg-purple">
                        <i class="fa fa-clock-o"></i>
                    </div>
                    <div class="stat-content">
                        <h3>累计学习时长</h3>
                        <p class="stat-number">42 小时</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon bg-orange">
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="stat-content">
                        <h3>积分</h3>
                        <p class="stat-number">158</p>
                    </div>
                </div>
            </section>

            <!-- 近期预约卡片 -->
            <section class="recent-bookings">
                <h2>近期预约</h2>
                <div class="booking-cards">
                    <div class="booking-card">
                        <div class="booking-info">
                            <h3><i class="fa fa-building"></i> 主馆3楼</h3>
                            <p><i class="fa fa-map-marker"></i> 座位号: 3-12</p>
                            <p><i class="fa fa-calendar"></i> 2024-01-20</p>
                            <p><i class="fa fa-clock-o"></i> 14:00 - 17:00</p>
                        </div>
                        <div class="booking-actions">
                            <button class="btn btn-primary">查看详情</button>
                            <button class="btn btn-secondary">取消预约</button>
                        </div>
                    </div>
                    <div class="booking-card">
                        <div class="booking-info">
                            <h3><i class="fa fa-building"></i> 科技楼5楼</h3>
                            <p><i class="fa fa-map-marker"></i> 座位号: 5-08</p>
                            <p><i class="fa fa-calendar"></i> 2024-01-21</p>
                            <p><i class="fa fa-clock-o"></i> 09:00 - 12:00</p>
                        </div>
                        <div class="booking-actions">
                            <button class="btn btn-primary">查看详情</button>
                            <button class="btn btn-secondary">取消预约</button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 座位利用率和推荐区域 -->
            <section class="dashboard-grid">
                <div class="dashboard-card">
                    <h2>座位利用率</h2>
                    <div class="chart-container">
                        <!-- 这里可以嵌入图表 -->
                        <div class="chart-placeholder">
                            <i class="fa fa-bar-chart"></i>
                            <p>座位利用率图表</p>
                        </div>
                    </div>
                </div>
                <div class="dashboard-card">
                    <h2>推荐区域</h2>
                    <div class="recommendations">
                        <div class="recommend-item">
                            <i class="fa fa-star"></i>
                            <span>安静区 - 空位充足</span>
                        </div>
                        <div class="recommend-item">
                            <i class="fa fa-star"></i>
                            <span>讨论区 - 适合小组学习</span>
                        </div>
                        <div class="recommend-item">
                            <i class="fa fa-star"></i>
                            <span>电子资源区 - 设备齐全</span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 图书馆座位预约系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>